
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
/* var ue = UE.getEditor('editor'); */
var ue = UE.getEditor('editor', {wordCount:false,elementPathEnabled:false});

$(function(){
	/**
	 * funcLoadTpl
	 * 被按钮调用,用来加载模板
	 */
	var funcLoadTpl = function(tplName, id){
		if(tplName){
			$('#'+id).attr('disabled', 'disabled');
			$.ajax({
    			type: 'POST',
    			url: ctx + '/my/fetchOneTplByName',
    			data: {"tplName": tplName},
    			success: function(_data){
    				if(_data){
    					var isAppendTo = false;
    					// 插入内容前,先清空编辑器
    					// var ue = UE.getEditor('editor'); // 上方有定义
    					ue.setContent('', isAppendTo);
    					ue.execCommand('insertHtml', _data);
    				}
    				$('#'+id).removeAttr('disabled');
    			},
    			error: function(_data){
    				console.log(_data);
    				$('#'+id).removeAttr('disabled');
    			}
    		});
		}
	};
	/**
	 * 加载模板导入按钮
	 * 依赖`funcLoadTpl`
	 */
	$.ajax({
		type: 'POST',
		url: ctx + '/my/fetchAllTpls',
		data: {},
		success: function(_data){
			if(_data){
				//TODO: 
				var tpl = "<option value='{1}'>{1}</option>";
				var btnTpl = '<input class="tplbtn" type="button" id="{1}" value="{2}">';
				$.each(_data, function(i,n){
					/**
					 * http://www.w3school.com.cn/jsref/jsref_replace.asp
					 * `replace`的用法见上面网址的介绍
					 */
					var btn = btnTpl.replace(/\{1\}/g, 'tplbtn_'+i).replace(/\{2\}/g, n);
					$(btn).appendTo( $('#btngroup') );
					$('#tplbtn_'+i).on('click', function(){
						funcLoadTpl(n, 'tplbtn_'+i);
					});
				});
			}
		},
		error: function(_data){
			console.log(_data);
		}
	});
});

/**
 * 前台等待时的提示信息
 */
var funcPleaseWait = (function(){
	return {
		'show': function(){
			if($('#waitDiv')[0]){
				$('#waitDiv').css('display', 'block');
	    	}else{
	    		$(waitDivHtml).appendTo('body');
	    		setTimeout(function(){
    				$('#waitDiv').css('display', 'block');
    			},10);
	    	}
		},
		'hide': function(){
			$('#waitDiv').css('display', 'none');
		}
	};
})();

/**
 * date: 2018年2月19日
 * 配置两个iframe
 */
(function(){
	// emriframe101
	setTimeout(function(){
		var ue = UE.getEditor('editor');
		var ifrdoc = ue.iframe.contentWindow.document;
		var emriframe = $('#emriframe101');
		var emrifrdoc = emriframe[0].contentWindow.document;
		emrifrdoc.open();
		emrifrdoc.write('<html>');
		emrifrdoc.write( $('head', ifrdoc)[0].outerHTML );
		emrifrdoc.write( $('body', ifrdoc)[0].outerHTML );
		emrifrdoc.write('</html>');
		emrifrdoc.close();
	}, 300);
	// emriframe102
	setTimeout(function(){
		var ue = UE.getEditor('editor');
		var ifrdoc = ue.iframe.contentWindow.document;
		var emriframe = $('#emriframe102');
		var emrifrdoc = emriframe[0].contentWindow.document;
		emrifrdoc.open();
		emrifrdoc.write('<html>');
		emrifrdoc.write( $('head', ifrdoc)[0].outerHTML );
		emrifrdoc.write( $('body', ifrdoc)[0].outerHTML );
		emrifrdoc.write('</html>');
		emrifrdoc.close();
	}, 300);
})();

$(function(){
	/**
	 * date: 2018年2月19日
	 * 显示UE编辑器中的所有的子元素,和它们的高度
	 * 
	 * 这个例子可以运行下,思考下！
	 */
	$('#btnShowAllChildren').on('click', function(){
		var ue = UE.getEditor('editor');
		var ifrdoc = ue.iframe.contentWindow.document;
		var body = $('body', ifrdoc);
		console.log('ifrdoc body height: ', body.height());
		var emriframe = $('#emriframe101');
		var emrifrdoc = emriframe[0].contentWindow.document;
		var emrifrbody = $('body', emrifrdoc);
		emrifrbody.empty();
		emrifrbody.append( body[0].innerHTML );
		/**
		 * 将`height()`改为`outerHeight()`
		 * 
		 * http://api.jquery.com/height/
		 * http://api.jquery.com/outerHeight/
		 * -	* Get the current computed outer height (including padding, border, and optionally margin) 
		 * for the first element in the set of matched elements or set the outer height of every matched element.
		 * -	* 看上面的解释,之前一直使用osc的jquery API,但是那个中文API解释的有些问题,不如jquery官网的解释清晰
		 * -	* 在上面的官网链接上有一张图片,非常清晰的解释了`outerHeight()`的用法.
		 * -	* `outerHeight()`默认得到的高度是包含padding和border的,
		 * -	* `outerHeight(true)`添加一个参数`true`得到的高度就是包含padding,border,margin三者的了。
		 * 
		 */
		var _h = 0, _outerH = 0;
		$.each( emrifrbody.children(), function(i,n){
			// console.log( $(n).outerHeight(), $(n)[0].outerHTML );
			console.log( $(n).outerHeight(), $(n).outerHeight(true) );
			_h += $(n).outerHeight();
			_outerH += $(n).outerHeight(true);
		} );
		console.log('_h : ', _h);
		console.log('_outerH : ', _outerH);
		console.log('_outerH - (_outerH-_h)/2 : ', (_outerH - (_outerH-_h)/2));
	});
	
	/**
	 * date: 2018年2月23日
	 * 拆分table
	 * 
	 * https://www.cnblogs.com/mq0036/p/6013225.html
	 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
	 * [√] http://blog.csdn.net/lihefei_coder/article/details/53022253
	 */
	$('#btnSplitTable').on('click', function(){
		var ue = UE.getEditor('editor');
		var ifrdoc = ue.iframe.contentWindow.document;
		var body = $('body', ifrdoc);
		var table1 = body.find('table').eq(0); // eq(0), 非eq(1)
//		console.log( table1[0].outerHTML );
		/**
		 * new RegExp("(<.+>).+(<\/.+>)");    //(1)
		 * new RegExp("(<.+?>).+(<\/.+?>)");  //(2)
		 * JS是支持`+?`这种"忽略优先量词"的,(1)和(2)得到的结果是不同的(在chrome下测试)
		 */
		var regexp = new RegExp("(<.+?>).+(<\/.+?>)");
		var startTag = '', endTag = '';
		if( regexp.test(table1[0].outerHTML) ){
			startTag = RegExp.$1;
			endTag = RegExp.$2;
		}
		var trs = table1.find('tr');
		if(trs && trs.length > 1){
			var arr1 = [], arr2 = [];
			var htmlstr1 = '', htmlstr2 = '';
			$.each(trs, function(i,n){
				if(i==0){
					arr1.push( $(n)[0].outerHTML );
				}else{
					arr2.push( $(n)[0].outerHTML );
				}
			});
			htmlstr1 += startTag;
			htmlstr2 += startTag;
			$.each(arr1, function(i,n){
				htmlstr1 += n;
			});
			$.each(arr2, function(i,n){
				htmlstr2 += n;
			});
			htmlstr1 += endTag;
			htmlstr2 += endTag;
			table1.before( htmlstr1 );
			table1.before( htmlstr2 );
			table1.remove();
		}
		
	});
	
	/**
	 * date : 2018年2月23日
	 * 
	 * http://api.jquery.com/children/ : 只能得到子标签
	 * http://api.jquery.com/contents/ : 可以得到文本节点
	 * https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType : nodeType
	 */
	$('#btnContents').on('click', function(){
		arr = $('#span001').contents();
		console.log( arr );
		var contentsArr = $('#span002').contents();
		var str = '';
		$.each(contentsArr, function(i,n){
			console.log( n );
//			if(n.nodeType === 3){
//				console.log( n );
//			}
		});
//		.filter(function(){return this.nodeType === 3})
//		.wrap('<span class="emr"></span>');
		
		var str = $('#span002')[0].outerHTML;
		console.log( str );
	});
	/**
	 * 
	 */
	$('#btnSplitInlineEle').on('click', function(){
		var lin = new LoopInlineNodes();
		lin.loop( $('#span002')[0] );
		var _newid = $('#span002').attr('id')+'_01';
		$('#span002').attr('id', _newid );
		$('#'+_newid).before( lin.getHtmlStr() );
		console.log( lin.getHtmlStr() );
		$('#'+_newid).remove();
	});
	
});

/**
 * date: 2018年2月23日
 * 
 * js循环遍历节点,并将纯文本包装(wrap)
 * 递归遍历元素节点,
 * (1)遇到文本节点,wrap;
 * (2)遇到标签递归,
 * 
 * [ typeof ](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof)
 * console.log( (typeof ele) , $(ele).text() );
 * 
 */
var LoopInlineNodes = /** @class */ (function () {
	var regexp = new RegExp("(<.+?>).+(<\/.+?>)");
	var htmlStr = null;
    function LoopInlineNodes() {
        htmlStr = '';
    }
    function _loop(ele){
        if (ele.nodeType === 3) {
        	var text = $(ele).text();
            var len = text.length;
            for (var i = 0; i < len; i++) {
                htmlStr += '<span class="emr">' + text[i] + '</span>';
            }
        }
        else {
            var startTag = '';
            var endTag = '';
            if (regexp.test($(ele)[0].outerHTML)) {
                startTag = RegExp.$1;
                endTag = RegExp.$2;
            }
            htmlStr += startTag;
            var contentsArr = $(ele).contents();
            if (contentsArr && contentsArr.length > 0) {
                $.each(contentsArr, function (i, n) {
                	_loop(n);
                });
            }
            htmlStr += endTag;
        }
    }
    LoopInlineNodes.prototype.getHtmlStr = function () {
        return htmlStr;
    };
    LoopInlineNodes.prototype.loop = function (ele) {
    	_loop(ele);
    };
    return LoopInlineNodes;
}());


/**
 * add at 2019年9月3日15:04:16
 * 参考API: https://ueditor.baidu.com/doc/#UE.EventBase:fireEvent(String,*...)
 */

ue.addListener("eventTest", function(type, arg1, arg2){
	console.log(type, arg1, arg2)
})

ue.fireEvent('eventTest', 'Hello', 'World')




